<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>文章分享</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/works-share.css">
    <link rel="stylesheet" href="css/article_share.css">
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img src="img/header_logo.png" alt="找设计"></a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li>
						<a href="index.html">首页<span class="sr-only">(current)</span></a>
					</li>
					<li>
						<a href="works_share.html">作品分享</a>
					</li>
					<li class="active">
						<a href="article_share.html">文章分享</a>
					</li>
					<li>
						<a href="material_collection.html">素材收集</a>
					</li>
					<li>
						<a href="contact.html">联系我们</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!--内容标题-->
	<h2 class="content-title1">
		<div class="title-wrap">
			<span class="title-cn">文章分享</span><img src="img/index_pic_two.png" alt=""><sapn class="title-en">Work share</sapn>
			<span class="title-state ">Utmost for the well-known enterprises at home and abroad to provide a full range of multi-platform solution ..</span>
		</div>
	</h2>
    <!--<div class="nav-change">
    	<img src="img/change_03.png">
    </div>-->
	<!--分类导航-->
	<style>
		.nav-classification{
			width: 100%;
			height: 100%;
			margin-bottom:30px;
			margin-top:30px;
		}
		.nav-classification nav{width:100%;
		margin:0px auto;
		text-align:center;
		border-bottom:4px solid #CCC;
		
		 }
		i{
			display:inline-block;
			margin-right:10px;					 	 
			width: 72px;
			height: 86px;
			background: #FFFFFF;
			border-radius: 50% 50% 0px 0px;
		}
		.nav-classification nav i input{position:relative;top:60%;}
	</style>
	<div class="nav-classification">
		<nav>
			<i><input type="submit" value="WEB"></i>
            <i><input type="submit" value="WEB"></i>
            <i><input type="submit" value="WEB"></i>
            <i><input type="submit" value="WEB"></i>
            <i><input type="submit" value="WEB"></i>
		</nav>
	</div>
	<!--案例列表-->
	<div class="recommend container">
		<ul class="recommend-list">
			<li class="col-lg-4 col-sm-6">
				<div class="recommend-box">
					<img class="img-responsive" src="img/recommend_list.jpg" alt="">
					<a class="li-btn" href="#"><b><i></i></b></a>
				</div>
			</li>
			<li class="col-lg-4 col-sm-6">
				<div class="recommend-box">
					<img class="img-responsive" src="img/recommend_list.jpg" alt="">
					<a class="li-btn" href="#"><b><i></i></b></a>
				</div>
			</li>
			<li class="col-lg-4 col-sm-6">
				<div class="recommend-box">
					<img class="img-responsive" src="img/recommend_list.jpg" alt="">
					<a class="li-btn" href="#"><b><i></i></b></a>
				</div>
			</li>
			<li class="col-lg-4 col-sm-6">
				<div class="recommend-box">
					<img class="img-responsive" src="img/recommend_list.jpg" alt="">
					<a class="li-btn" href="#"><b><i></i></b></a>
				</div>
			</li>
			<li class="col-lg-4 col-sm-6">
				<div class="recommend-box">
					<img class="img-responsive" src="img/recommend_list.jpg" alt="">
					<a class="li-btn" href="#"><b><i></i></b></a>
				</div>
			</li>
			<li class="col-lg-4 col-sm-6">
				<div class="recommend-box">
					<img class="img-responsive" src="img/recommend_list.jpg" alt="">
					<a class="li-btn" href="#"><b><i></i></b></a>
				</div>
			</li>
		</ul>
	</div>
	<!-- 小白科普 -->
	<div class="container">
	<div class="mark">
		<img src="img/article_show.png" alt="">
		<div class="mark-content">
			<h2>小白科普：UI设计中的48DP定律</h2>
			<span>时间 : 2017-05-01</span>
			<span class="mark-content-right">产品类型 : US price,美的代价、</span>
			<p>推荐阅读：</p>
			<ul>
				<li><a href="#">《超赞！源自codepen的25个最受欢迎的HTML/CSS代码》</a></li>
				<li><a href="#">《干货！扁平风+iOS 7线型风界面组件PSD打包下载》</a></li>
				<li><a href="#">《让设计更出色！IOS7图标设计的七条黄金法则》</a></li>
			</ul>
		</div>
	</div>
	</div>
	<div><h1>这是很多文字</h1></div>
	<!-- 相关文章 -->
	<div class=" container">
		<h4>相关文章</h4>
		<ul>
			<li><a href="#">推荐；响应式网页设计与应用</a></li>
			<li><a href="#">脱水技术文！聊聊iphone6分辨率与适配</a></li>
			<li><a href="#">AutoLayout入门教程！一稿适配所有IOS设备的神器</a></li>
			<li><a href="#">小科普！Android和Ios设计到底有什么不同？</a></li>
			<li><a href="#">10个必备的移动UI设计资源站</a></li>
			<li><a href="#">2014年移动界面设计新趋势你知道多少？</a></li>
		</ul>
		<a href="#">设计师如何找到合适的设计团队</a>
		<a href="#">拒绝平庸：优秀的Web登录页面设计</a>
	</div>
	<!-- 评论  -->
	<form class="container form-inline" id="contact_form">
		<div class="form-group">
			<input type="text" class="form-control" id="exampleInputEmail3" placeholder="昵称">
		</div>
		<div class="form-group">
			<input type="email" class="form-control" id="exampleInputPassword3" placeholder="邮箱">
		</div>
		<div class="form-group">
			<input type="url" class="form-control form-control-one" placeholder="网址">
		</div>
		<textarea class="form-control formTwo" placeholder="留下你的想法"></textarea>
		<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">评论</button>
	</form>
	<div id="comment">
		<div class="comment-bg">
			<ul class="container comment-ul">
				<li class="comment-img"><img src="img/ct_img.png" alt=""></li>
				<li class="comment-word">
					<span>颜其巧</span>&nbsp;&nbsp;评论于&nbsp;&nbsp;<span>2017-05-08&nbsp;&nbsp;&nbsp;19:10:45</span>
					<p>好，非常好！！</p>
				</li>
			</ul>
		</div>
		<div class="comment-bg">
			<ul class="container comment-ul">
				<li class="comment-img"><img src="img/ct_img.png" alt=""></li>
				<li class="comment-word">
					<span>颜其巧</span>&nbsp;&nbsp;评论于&nbsp;&nbsp;<span>2017-05-08&nbsp;&nbsp;&nbsp;19:10:45</span>
					<p>好，非常好！！</p>
				</li>
			</ul>
		</div>
		<div class="comment-bg">
			<ul class="container comment-ul">
				<li class="comment-img"><img src="img/ct_img.png" alt=""></li>
				<li class="comment-word">
					<span>颜其巧</span>&nbsp;&nbsp;评论于&nbsp;&nbsp;<span>2017-05-08&nbsp;&nbsp;&nbsp;19:10:45</span>
					<p>好，非常好！！</p>
				</li>
			</ul>
		</div>
		<div class="comment-bg">
			<ul class="container comment-ul">
				<li class="comment-img"><img src="img/ct_img.png" alt=""></li>
				<li class="comment-word">
					<span>颜其巧</span>&nbsp;&nbsp;评论于&nbsp;&nbsp;<span>2017-05-08&nbsp;&nbsp;&nbsp;19:10:45</span>
					<p>好，非常好！！</p>
				</li>
			</ul>
		</div>
		<div class="comment-bg">
			<ul class="container comment-ul">
				<li class="comment-img"><img src="img/ct_img.png" alt=""></li>
				<li class="comment-word">
					<span>颜其巧</span>&nbsp;&nbsp;评论于&nbsp;&nbsp;<span>2017-05-08&nbsp;&nbsp;&nbsp;19:10:45</span>
					<p>好，非常好！！</p>
				</li>
			</ul>
		</div>
	</div>
    <!--底部-->
    <div class="footer">
    	<h3><a href="#">加载更多</a></h3>
        <div class="footer-con">
            <p>找设计网打造交流平台。</p>
            <p class="design">设计师将图标上传到 die1218.xyz平台，用户可以自定义下载便于设计师自由调整与调用。<span class="enter">友情链接</span></p>
            <p class="where">转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源，商业媒体及纸媒请先联系<span class="ued">UED优秀网页设计</span><span class="china">Bootstrap中文网</span><span class="mic">微博</span></p>
        </div>
    </div>
	
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>